---
title: Button
description: Displays a button or a component that looks like a button.
---

import { CommandTabs } from "@docs/components/command-tabs";
import { ExternalLinks } from "@docs/components/external-links";
import { PreviewCard } from "@docs/components/preview-card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@docs/components/ui/tabs";
import { ButtonPreview, ButtonDestructivePreview, ButtonOutlinePreview, ButtonSecondaryPreview, ButtonGhostPreview, ButtonLinkPreview, ButtonIconPreview, ButtonWithIconPreview, ButtonLoadingPreview } from "@docs/components/examples";
import { Step, Steps } from 'fumadocs-ui/components/steps';

<div className="h-5"/>

<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="code">Code</TabsTrigger>
  </TabsList>
  <TabsContent value="preview">
    <div id="preview" className='*:hidden scroll-m-20' aria-hidden>
      ## Preview
    </div>
    <PreviewCard preview={<ButtonPreview />} />
  </TabsContent>
  <TabsContent value="code">
    ```json doc-gen:file
    {
      "file": "./node_modules/@rnr/registry/src/examples/button/button-primary.tsx",
      "codeblock": {
        "lang": "tsx"
      }
    }
    ```
  </TabsContent>
</Tabs>


## Installation

<Tabs defaultValue="cli">
  <TabsList>
    <TabsTrigger id="cli" value="cli">CLI</TabsTrigger>
    <TabsTrigger id="manual" value="manual">Manual</TabsTrigger>
  </TabsList>
  <TabsContent value="cli">
     <CommandTabs args={["add", "button"]}/>
  </TabsContent>
  <TabsContent value="manual">
    <Steps> 
      <Step>
 
        **Install the following dependencies:**

        ```
        npx expo install @rn-primitives/slot
        ```

      </Step>
      <Step>
 
        **Copy and paste the following code into your project.**

        ```json doc-gen:file
        {
          "file": "./node_modules/@rnr/registry/src/new-york/components/ui/text.tsx",
          "codeblock": {
            "lang": "tsx",
            "meta": "title=\"@/components/ui/text.tsx\""
          }
        }
        ```

        ```json doc-gen:file
        {
          "file": "./node_modules/@rnr/registry/src/new-york/components/ui/button.tsx",
          "codeblock": {
            "lang": "tsx",
            "meta": "title=\"@/components/ui/button.tsx\""
          }
        }
        ```

      </Step>
      <Step>

        **Update the import paths to match your project setup.**

      </Step>
    </Steps>

  </TabsContent>
</Tabs>

### Usage

```tsx
import { Button } from '@/components/ui/button';
import { Text } from '@/components/ui/text';

```

```tsx
<Button>
  <Text>Button</Text>
</Button>
```

#### Link

You can use the `buttonVariants` and `buttonTextVariants` helpers to create a link that looks like a button.

```tsx
import { buttonVariants, buttonTextVariants } from "@/components/ui/button"
```

```tsx
<Link className={buttonVariants({ variant: 'outline' })}>
  <Text className={buttonTextVariants({ variant: 'outline' })}>Click here</Text>
</Link>
```

Alternatively, you can set the `asChild` parameter and nest the link component.

```tsx
<Button asChild>
  <Link href="/login">
    <Text>Login</Text>
  </Link>
</Button>
```

### Examples

#### Primary

<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="code">Code</TabsTrigger>
  </TabsList>
  <TabsContent value="preview">
    <PreviewCard preview={<ButtonPreview />} />
  </TabsContent>
  <TabsContent value="code">
    ```json doc-gen:file
    {
      "file": "./node_modules/@rnr/registry/src/examples/button/button-primary.tsx",
      "codeblock": {
        "lang": "tsx"
      }
    }
    ```
  </TabsContent>
</Tabs>

<div className="h-5"/>

#### Secondary

<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="code">Code</TabsTrigger>
  </TabsList>
  <TabsContent value="preview">
    <PreviewCard preview={<ButtonSecondaryPreview />} />
  </TabsContent>
  <TabsContent value="code">
    ```json doc-gen:file
    {
      "file": "./node_modules/@rnr/registry/src/examples/button/button-secondary.tsx",
      "codeblock": {
        "lang": "tsx"
      }
    }
    ```
  </TabsContent>
</Tabs>

<div className="h-5"/>

#### Destructive

<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="code">Code</TabsTrigger>
  </TabsList>
  <TabsContent value="preview">
    <PreviewCard preview={<ButtonDestructivePreview />} />
  </TabsContent>
  <TabsContent value="code">
    ```json doc-gen:file
    {
      "file": "./node_modules/@rnr/registry/src/examples/button/button-destructive.tsx",
      "codeblock": {
        "lang": "tsx"
      }
    }
    ```
  </TabsContent>
</Tabs>

<div className="h-5"/>

#### Outline

<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="code">Code</TabsTrigger>
  </TabsList>
  <TabsContent value="preview">
    <PreviewCard preview={<ButtonOutlinePreview />} />
  </TabsContent>
  <TabsContent value="code">
    ```json doc-gen:file
    {
      "file": "./node_modules/@rnr/registry/src/examples/button/button-outline.tsx",
      "codeblock": {
        "lang": "tsx"
      }
    }
    ```
  </TabsContent>
</Tabs>

<div className="h-5"/>

#### Ghost

<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="code">Code</TabsTrigger>
  </TabsList>
  <TabsContent value="preview">
    <PreviewCard preview={<ButtonGhostPreview />} />
  </TabsContent>
  <TabsContent value="code">
    ```json doc-gen:file
    {
      "file": "./node_modules/@rnr/registry/src/examples/button/button-ghost.tsx",
      "codeblock": {
        "lang": "tsx"
      }
    }
    ```
  </TabsContent>
</Tabs>

<div className="h-5"/>

#### Link

<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="code">Code</TabsTrigger>
  </TabsList>
  <TabsContent value="preview">
    <PreviewCard preview={<ButtonLinkPreview />} />
  </TabsContent>
  <TabsContent value="code">
    ```json doc-gen:file
    {
      "file": "./node_modules/@rnr/registry/src/examples/button/button-link.tsx",
      "codeblock": {
        "lang": "tsx"
      }
    }
    ```
  </TabsContent>
</Tabs>

<div className="h-5"/>

#### Icon

<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="code">Code</TabsTrigger>
  </TabsList>
  <TabsContent value="preview">
    <PreviewCard preview={<ButtonIconPreview />} />
  </TabsContent>
  <TabsContent value="code">
    ```json doc-gen:file
    {
      "file": "./node_modules/@rnr/registry/src/examples/button/button-icon.tsx",
      "codeblock": {
        "lang": "tsx"
      }
    }
    ```
  </TabsContent>
</Tabs>

<div className="h-5"/>

#### With Icon

<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="code">Code</TabsTrigger>
  </TabsList>
  <TabsContent value="preview">
    <PreviewCard preview={<ButtonWithIconPreview />} />
  </TabsContent>
  <TabsContent value="code">
    ```json doc-gen:file
    {
      "file": "./node_modules/@rnr/registry/src/examples/button/button-with-icon.tsx",
      "codeblock": {
        "lang": "tsx"
      }
    }
    ```
  </TabsContent>
</Tabs>

<div className="h-5"/>

#### Loading

<Tabs defaultValue="preview">
  <TabsList>
    <TabsTrigger value="preview">Preview</TabsTrigger>
    <TabsTrigger value="code">Code</TabsTrigger>
  </TabsList>
  <TabsContent value="preview">
    <PreviewCard preview={<ButtonLoadingPreview />} />
  </TabsContent>
  <TabsContent value="code">
    ```json doc-gen:file
    {
      "file": "./node_modules/@rnr/registry/src/examples/button/button-loading.tsx",
      "codeblock": {
        "lang": "tsx"
      }
    }
    ```
  </TabsContent>
</Tabs>